<template>
	<view class="page-content flex-col">
		<view style="background-color: #fff;height: auto;">
			<u-navbar :is-back="false" title="">
				<view class="slot-wrap" style="display: flex;width: 100%;">
					<view class="header-bar-left">
						<image src="/static/index/search.png" style="height: 48rpx;width: 48rpx;" @click="handleSearch"></image>
					</view>
					<view class="header-bar-center">
						<u-tabs-swiper active-color="#000000" inactive-color="#999999" ref="tabs"
							:bar-style="{background:'#FCD610'}" :current="current" :list="tablist" :is-scroll="false"
							@change="change"></u-tabs-swiper>
					</view>
				</view>
			</u-navbar>
		</view>


		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view style="height: 100%;" scroll-y="true" lower-threshold="50" @scrolltolower="addRandomData"
					:refresher-enabled="true" @refresherrefresh="handlerefresh" :refresher-triggered="showrefresh">
					<template v-if="flowList.length === 0 && loadStatus === 'nomore'">
						<empty></empty>
					</template>
					<template v-else>
						<u-waterfall v-model="flowList" ref="uWaterfall1">
							<template v-slot:left="{leftList}">
								<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
									<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
									<circle-card :data="item" @linkTo="handleToDetail(item.id)"
										@handleChangeLike="(e)=>handleChangeLike(e,item)"></circle-card>
								</view>
							</template>
							<template v-slot:right="{rightList}">
								<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
									<circle-card :data="item" @linkTo="handleToDetail(item.id)"
										@handleChangeLike="(e)=>handleChangeLike(e,item)"></circle-card>
								</view>
							</template>
						</u-waterfall>
						<u-loadmore bg-color="#F6F6F6" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
					</template>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view style="height: 100%;" scroll-y="true" lower-threshold="50" @scrolltolower="addRandomData"
					:refresher-enabled="true" @refresherrefresh="handlerefresh2" :refresher-triggered="showrefresh">
					<template v-if="flowList.length === 0 && loadStatus === 'nomore'">
						<empty></empty>
					</template>
					<template v-else>
						<u-waterfall v-model="flowList" ref="uWaterfall2">
							<template v-slot:left="{leftList}">
								<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
									<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
									<circle-card :data="item" @linkTo="handleToDetail(item.id)"
										@handleChangeLike="(e)=>handleChangeLike(e,item)"></circle-card>
								</view>
							</template>
							<template v-slot:right="{rightList}">
								<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
									<circle-card :data="item" @linkTo="handleToDetail(item.id)"
										@handleChangeLike="(e)=>handleChangeLike(e,item)"></circle-card>
								</view>
							</template>
						</u-waterfall>
						<u-loadmore bg-color="#F6F6F6" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
					</template>
				</scroll-view>

			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view style="height: 100%;" scroll-y="true" lower-threshold="50" @scrolltolower="addRandomData"
					:refresher-enabled="true" @refresherrefresh="handlerefresh3" :refresher-triggered="showrefresh">
					<template v-if="flowList.length === 0 && loadStatus === 'nomore'">
						<empty></empty>
					</template>
					<template v-else>
						<u-waterfall v-model="flowList" ref="uWaterfall3">
							<template v-slot:left="{leftList}">
								<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
									<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
									<circle-card :data="item" @linkTo="handleToDetail(item.id)"
										@handleChangeLike="(e)=>handleChangeLike(e,item)"></circle-card>
								</view>
							</template>
							<template v-slot:right="{rightList}">
								<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
									<circle-card :data="item" @linkTo="handleToDetail(item.id)"
										@handleChangeLike="(e)=>handleChangeLike(e,item)"></circle-card>
								</view>
							</template>
						</u-waterfall>
						<u-loadmore bg-color="#F6F6F6" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="add-btn"><add-btn link="/pages/quan/publish-circle/publish-circle"></add-btn></view>
	</view>
</template>

<script>
	import navbar from "components/common/navbar/navbar.vue";
	import circleCard from "components/common/card/circle-card.vue";
	import addBtn from "components/index/add-fixed-btn.vue";
	import utils from "../../utils/util.js";
	import chongyouquan from "../../api/chongyouquan.js";
	import empty from "components/common/empty/empty.vue";
	const app = getApp();
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				tablist: [{
					name: '关注'
				}, {
					name: '发现'
				}],
				current: 0,
				swiperCurrent: 0,
				filterParmas: {
					city: '',
					pageNum: 0,
					pageSize: this.$config.pageSize,
					userId: ""
				}, //筛选参数
				showrefresh: false,
			}
		},
		watch: {
			swiperCurrent: function(newvalue, oldvalue) {
				this.flowList = [];
				this.loadStatus = "loadmore";
				this.filterParmas.city = '';
				this.filterParmas.pageNum = 0;
				switch (newvalue) {
					case 0:
						this.$refs.uWaterfall1.clear();
						break;
					case 1:
						this.$refs.uWaterfall2.clear();
						break;
					case 2:
						this.$refs.uWaterfall3.clear();
						this.filterParmas.city = this.tablist[newvalue].name;
						break;
					default:
						break;
				}
				this.addRandomData();
			},
		},
		onLoad() {
			const userinfo = uni.getStorageSync("userinfo");
			if (userinfo) {
				this.filterParmas.userId = userinfo.id
			}
			this.tablist[2] = {
				name: app.globalData.city
			};
			uni.$on('city', (city) => {
				this.tablist[2] = {
					name: city.msg
				}
			})
			this.addRandomData();
		},
		methods: {
			handleSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			addRandomData() {
				if (this.loadStatus === 'loadmore') {
					this.loadStatus = "loading";
					this.filterParmas.pageNum++;
					chongyouquan
						.getCYQuanList(this.filterParmas)
						.then((res) => {
							if (res.code === 200) {
								this.flowList.push(...res.rows);
								if (res.rows?.length < this.$config.pageSize)
									this.loadStatus = "nomore";
								else {
									this.loadStatus = "loadmore";
								}
								this.showrefresh = false;
							} else {
								throw Error();
							}
						})
						.catch((err) => {
							this.loadStatus = "nomore";
							this.showrefresh = false;
							console.log(err);
						});
				}
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},

			handleToDetail(id) {
				uni.navigateTo({
					url: '/pages/quan/pet-circle-detail/pet-circle-detail?id=' + id
				})
			},
			handlerefresh() {
				this.loadStatus = "loadmore";
				this.filterParmas.pageNum = 0;
				this.showrefresh = true;
				this.flowList = [];
				this.$refs.uWaterfall1.clear();
				this.addRandomData();
			},
			handlerefresh2() {
				this.loadStatus = "loadmore";
				this.filterParmas.pageNum = 0;
				this.showrefresh = true;
				this.flowList = [];
				this.$refs.uWaterfall2.clear();
				this.addRandomData();
			},
			handlerefresh3() {
				this.loadStatus = "loadmore";
				this.filterParmas.pageNum = 0;
				this.showrefresh = true;
				this.flowList = [];
				this.$refs.uWaterfall3.clear();
				this.addRandomData();
			},
			handleChangeLike(e, item) {
				if (e === 0)
					chongyouquan.addOrDelLike(item.id, 2).then(res => {
						if (res.code === 200) {
							item.likeCount--
						} else
							throw Error()
					}).catch(err => {
						uni.showToast({
							title: '取消失败',
							icon: 'none'
						})
					})
				else
					chongyouquan.addOrDelLike(item.id, 1).then(res => {
						if (res.code === 200) {
							item.likeCount++
						} else
							throw Error()
					}).catch(err => {
						uni.showToast({
							title: '收藏失败',
							icon: 'none'
						})
					})
			},
		},
		components: {
			circleCard,
			addBtn,
			navbar,
			empty
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		width: 100%;
		// padding-bottom: 100rpx;
		height: 100%;
		overflow-y: auto;
		background: #F6F6F6;

		/deep/ .u-navbar-content-title {
			display: none;
		}

		.header-bar-left {
			width: 136rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.header-bar-center {
			width: 100%;
			height: 100%;
			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			// overflow: hidden;
		}

		.demo-warter {
			margin: 24rpx 12rpx 0 12rpx;
		}

		.swiper-box {
			flex: 1;
			padding: 0 10rpx;
		}

		.add-btn {
			position: absolute;
			bottom: 40rpx;
			right: 32rpx;
		}
	}
</style>